<template>
  <div>
    <div class="add appBox">
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               status-icon
               :rules="rules"
               label-width="120px"
               label-position="left"
               class="demo-ruleForm">
        <div class="top flex_sb">
          <div class="flex left">
            <div class="cup flex"
                 @click="back">
              <el-icon size="18">
                <Back />
              </el-icon>
              <div class="ruturn">返回</div>
            </div>
            <div class="title">{{ boxTitle }}</div>
          </div>
          <div>
            <el-button v-preventReClick
                       type="primary"
                       @click="submit(ruleFormRef)">
              保 存
            </el-button>
          </div>
        </div>
        <div class="flex content">
          <div class="left">
            <div>基本资料</div>
          </div>
          <div class="right">
            <div class="formBox">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="子企业名称"
                                prop="name">
                    <el-input v-model="ruleForm.name"
                              placeholder="请填写子企业名称"
                              clearable
                              @input="ruleForm.name = $input.inputLimit('D10006',ruleForm.name)" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="子企业简称"
                                prop="shortName">
                    <el-input @input="ruleForm.shortName = $input.inputLimit('D10006',ruleForm.shortName)"
                              v-model="ruleForm.shortName"
                              clearable
                              placeholder="请选择子企业简称"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="企业行业"
                                prop="sectorId">
                    <el-select v-model="ruleForm.sectorId"
                               class="m-2"
                               placeholder="请选择企业行业">
                      <el-option v-for="item in options.profession"
                                 :key="item.id"
                                 :label="item.dictValue"
                                 :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="企业规模"
                                prop="scale">
                    <el-select v-model="ruleForm.scale"
                               class="m-2"
                               placeholder="请选择企业规模">
                      <el-option v-for="item in options.staffSize"
                                 :key="item.id"
                                 :label="item.dictValue"
                                 :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在城市"
                                prop="meetAddr">
                    <el-cascader style="width: 100%"
                                 :props="options.cityList"
                                 v-model="ruleForm.meetAddr" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="详细地址"
                                prop="addr">
                    <el-input @input="ruleForm.addr = $input.inputLimit('D10011',ruleForm.addr)"
                              v-model="ruleForm.addr"
                              clearable
                              placeholder="请输入详细地址"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="联系人"
                                prop="linkName">
                    <el-input @input=" ruleForm.linkName = $input.inputLimit('D10004',ruleForm.linkName)"
                              v-model="ruleForm.linkName"
                              clearable
                              placeholder="请输入联系人"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="联系电话"
                                prop="linkPhone">
                    <el-input @input="ruleForm.linkPhone = $input.inputLimit('D10005',ruleForm.linkPhone)"
                              v-model="ruleForm.linkPhone"
                              placeholder="请输入联系电话"
                              clearable></el-input> </el-form-item></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="&nbsp;&nbsp;企业LOGO"
                                class="logosm"
                                prop="">
                    <uploadImg :showNum="1"
                               :uploadImgList="ruleForm.logoImg"
                               @changeUploadImgList="UploadLogo" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-col :span="24">
                <el-form-item label="子企业环境图"
                              prop="environmentImg">
                  <uploadImg :showNum="5"
                             :uploadImgList="ruleForm.environmentImg"
                             @changeUploadImgList="changeUploadImgList" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div>
                  图片不超过5张切大小不大于5M
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
export default defineComponent({
  components: {},
  setup () {
    const app = getCurrentInstance()?.proxy;
    const router = useRouter();
    const route = useRoute();
    const initState = () => {
      return {
        boxTitle: "创建子职位",
        mapType: null,
        options: {
          profession: [],
          cityList: {
            checkStrictly: true,
            lazy: true,
            lazyLoad (node, resolve) {
              const { level } = node;
              let nodes = [];
              setTimeout(() => {
                if (level == 0) {
                  app.$http.get("/sys/addr/getProvince/list").then((res) => {
                    res.data.forEach((data) => {
                      nodes.push({
                        value: data.id,
                        label: data.name,
                        leaf: false,
                      });
                    });
                    resolve(nodes);
                  });
                }
                if (level == 1) {
                  app.$http
                    .get("/sys/addr/getProvince/list?pid=" + node.data.value)
                    .then((res) => {
                      res.data.forEach((data) => {
                        nodes.push({
                          value: data.id,
                          label: data.name,
                          leaf: false,
                        });
                      });
                      resolve(nodes);
                    });
                }
                if (level == 2) {
                  app.$http
                    .get("/sys/addr/getProvince/list?pid=" + node.data.value)
                    .then((res) => {
                      res.data.forEach((data) => {
                        nodes.push({
                          value: data.id,
                          label: data.name,
                          leaf: true,
                        });
                      });
                      resolve(nodes);
                    });
                }
              }, 100);
            },
          },
          staffSize: [],
        },
        ruleForm: {
          cid: app.$route.query.cid,
          name: "",
          shortName: "",
          sectorId: "",
          scale: "",
          meetAddr: "",
          linkName: "",
          linkPhone: "",
          logoImg: "",
          environmentImg: "",
          addr: "",
        },
        rules: {
          name: [
            { required: true, message: "请输入子企业名称", trigger: "blur" },
          ],
          addr: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
          linkName: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          linkPhone: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],

          shortName: [
            { required: true, message: "请输入子企业简称", trigger: "blur" },
          ],
          sectorId: [
            { required: true, message: "请选择企业行业", trigger: "blur" },
          ],
          scale: [
            { required: true, message: "请选择企业规模", trigger: "blur" },
          ],
          meetAddr: [
            { required: true, message: "请选择所在城市", trigger: "blur" },
          ],
          environmentImg: [
            { required: true, message: "请上传工作环境图", trigger: "blur" },
          ],
        },
      };
    };
    const state = reactive(initState());
    onMounted(() => {
      state.options.profession = JSON.parse(localStorage.getItem("profession"));
      state.options.staffSize = JSON.parse(localStorage.getItem("staffSize"));
      if (route.query.id) {
        state.boxTitle = '编辑子企业'
        methods.getData();
      }
    });
    const methods = {
      getChildCompanyByUserId () {
        app.$http.post("/childCompany/getChildCompanyByUserId").then((res) => {
          if (res.data) {
            state.options.childCompanyId = res.data;
          }
        });
      },

      back () {
        router.go(-1);
      },
      submit () {
        app.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              text: "努力加载中",
            });
            let url = "/childCompany/addPlat";
            if (route.query.id) {
              url = "/childCompany/updatePlat";
            }
            let data = JSON.parse(JSON.stringify(state.ruleForm));
            data.cid = Number(route.query.cid)
            data.provinceId = data.meetAddr[0] || '';
            data.cityId = data.meetAddr[1] || '';
            data.districtId = data.meetAddr[2] || '';
            data.logoImg = JSON.stringify(data.logoImg);
            data.environmentImg = JSON.stringify(data.environmentImg);

            app.$http.post(url, data).then((res) => {
              if (res.code == 200) {

                ElMessage({
                  message: "成功保存",
                  type: "success",
                });
                router.go(-1);
                loading.close();
              } else {
                loading.close();
              }

            })
              .catch(() => {
                setTimeout(() => {
                  loading.close();
                }, 1000);
              });
          }
        });
      },
      getData () {
        app.$http
          .get("/childCompany/getById?id=" + route.query.id)
          .then((res) => {
            if (res.data) {
              res.data.environmentImg = JSON.parse(res.data.environmentImg);
              res.data.logoImg = JSON.parse(res.data.logoImg);

              if (res.data.provinceId) {
                res.data.meetAddr = [
                  res.data.provinceId,
                ]
              }
              if (res.data.cityId) {
                res.data.meetAddr = [
                  res.data.provinceId,
                  res.data.cityId,
                ]
              }
              if (res.data.districtId) {
                res.data.meetAddr = [
                  res.data.provinceId,
                  res.data.cityId,
                  res.data.districtId,
                ]
              }

              state.ruleForm = res.data;
              console.log(state.ruleForm, '=');
            }
          });
      },
      changeUploadImgList (data) {
        state.ruleForm.environmentImg = data;
      },
      UploadLogo (data) {
        state.ruleForm.logoImg = data;
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.logosm {
  ::v-deep(.el-form-item__label::after) {
    content: '130*130 像素';
    color: #969696;
    position: absolute;
    font-size: 12px;
    top: 24px;
    left: 20px;
  }
}
.add {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  // height: 100%;
  // padding: 30px 40px;
  box-sizing: border-box;
  .demo-ruleForm {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top {
    .ruturn {
      color: rgba(121, 121, 121, 1);
      font-size: 16px;
      position: relative;
      margin-left: 10px;
      margin-top: -2px;
    }
    .ruturn::before {
      content: '';
      position: absolute;
      left: 50px;
      top: 4px;
      width: 1px;
      height: 16px;
      background: rgba(121, 121, 121, 0.8);
    }
    .left {
      align-items: center;
    }
    .title {
      color: rgb(83, 83, 83);
      font-size: 16px;
      margin-left: 40px;
      font-weight: bold;
    }
  }
  .content {
    width: 100%;
    margin-top: 20px;
    height: 100%;
    flex: 1;
    .left {
      width: 360px;
      height: 100%;
      background-color: rgba(242, 242, 247, 0.33);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(174, 174, 178);
      font-size: 16px;
    }
    .right {
      flex: 1;
      padding: 26px;
      margin-left: 18px;
      border-radius: 5px;
      background-color: rgba(242, 242, 247, 0.33);
      .formBox {
        .workimgtitle {
          color: #969696;
          font-size: 14px;
        }
        ::v-deep(.el-row) {
          margin-bottom: 10px;
        }
        .addImg {
          width: 100px;
          height: 100px;
          margin-left: 100px;
          border-radius: 2px;
          text-align: center;
          line-height: 100px;
          font-size: 26px;
          cursor: pointer;
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
    ::v-deep(.el-select) {
      width: 100%;
    }
  }
}
</style>
